<template>
    <div class="all">
        <div class="bread">首页>>车辆管理>>加油记录</div>
        <div class="nav">
            <div>
                <!-- <el-button disabled  type="primary"  plain @click="dialogVisible = true">添加加油记录</el-button>  -->
                <span>发布时间</span>
                <span>车型：    
                     <el-select v-model="value" placeholder="选择车型" style="width: 240px">
                       <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"
                       />
                     </el-select>
                </span>
                <span>关键字<input></span>
                <span>搜索</span>
            </div>
        </div>
        <div class="content">
          <el-table v-loading="tableloading"  :data="tableData" border size="small" :row-style="{height: '35px'}" :cell-style="{padding: '0'}" style="width: 100% ;height:calc(100% - 150px);" >
            <el-table-column fixed label="序号" type="index" width="60" />
              <!-- <el-table-column fixed prop="xuhao" label="序号" width="60"/> -->
              <el-table-column prop="dingdanhao" label="订单号" width="120" />
              <el-table-column prop="chepaihao" label="车牌号" width="150" />
              <el-table-column prop="chejia" label="车架号" width="110" />
              <el-table-column prop="leixing" label="类型" width="130" />
              <el-table-column prop="jiayouriqi" label="加油日期" width="150" />
              <el-table-column prop="jine" label="金额" width="100" />
              <el-table-column prop="shangchuan" label="上传" width="150" />
              <el-table-column prop="beizhu" label="备注" width="150" />

              <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click.prevent="bianjiClick(scope.$index)"
                    >编辑</el-button>
                  <el-button link type="primary" size="small" @click.prevent="deleterInfo(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <Page :message="total" @get-message="getMessage"></Page>
        </div>
    </div>

    <!-- 添加记录对话框 -->
     <el-dialog
         v-model="dialogVisible"
         title="添加加油记录"
         width="500"
         :before-close="handleClose"
         style="text-align:center;padding-top: 10px;"
       >
       <!-- 添加记录的表单内容 -->
        <el-form :model="form" label-width="auto" style="max-width: 800px;padding: 0px 40px 40px 40px;">
          <el-form-item label="订单号">
            <el-input v-model="form.dingdanhao" />
          </el-form-item>         
          <el-form-item label="车牌号码">
            <el-input v-model="form.chepaihao" />
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="form.leixing" disabled />
          </el-form-item>
          <el-form-item label="加油日期">
            <el-col :span="11">
              <el-date-picker
                v-model="form.jiayouriqi"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item> 
          <el-form-item label="金额">
            <el-input v-model="form.jine" />
          </el-form-item>
          <el-form-item label="上传">
            <el-input v-model="form.shangchuan" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.beizhu" />
          </el-form-item>

        </el-form>

         <template #footer>
           <div class="dialog-footer">
             <el-button @click="dialogVisible = false">取消</el-button>
             <el-button type="primary" @click="addInfo()">
               确认
             </el-button>
           </div>
         </template>
     </el-dialog>
       

    <!-- 编辑记录对话框 -->
     <el-dialog
         v-model="bianjiVisible"
         title="编辑加油记录"
         width="500"
         :before-close="handleClose"
         style="text-align:center;padding-top: 10px;"
       >
       <!-- 编辑记录的表单内容 -->
      <el-form :model="form1" label-width="auto" style="max-width: 800px;padding: 0px 40px 40px 40px;">
          <el-form-item label="订单号">
            <el-input v-model="form1.dingdanhao" />
          </el-form-item>         
          <el-form-item label="车牌号码">
            <el-input v-model="form1.chepaihao" />
          </el-form-item>
          <el-form-item label="车架号">
            <el-input v-model="form1.chejia" disabled />
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="form1.leixing" disabled />
          </el-form-item>
          <el-form-item label="加油日期">
            <el-col :span="11">
              <el-date-picker
                v-model="form1.jiayouriqi"
                type="date"
                placeholder="选择时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
          </el-form-item> 
          <el-form-item label="金额">
            <el-input v-model="form1.jine" />
          </el-form-item>
          <el-form-item label="上传">
            <el-input v-model="form1.shangchuan" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form1.beizhu" />
          </el-form-item>

        </el-form>


         <template #footer>
           <div class="dialog-footer">
             <el-button @click="bianjiVisible = false">取消</el-button>
             <el-button type="primary" @click="putInfo()">
               确认
             </el-button>
           </div>
         </template>
     </el-dialog>       
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { addJiayou,getJiayouList,deleteJiayou,putJiayou} from '../../api/jiayou'

import Page from '../../zujian/page.vue'

//加载
const tableloading = ref(false)

//添加记录对话框开关
const dialogVisible = ref(false)
//编辑记录对话框开关
const bianjiVisible = ref(false)

//请求的页数
const count = ref(0)

//加油列表的总数
const total = ref()
//获取翻页组件传递的当前页数
const getMessage = (msg)=>{
  console.log(msg)
  count.value = msg - 1
  //重新加载表格
  getInfo()
}

const value = ref('')

//车型选择
const options = [
  {
    value: '防撞车',
    label: '防撞车',
  },
  {
    value: '高空作业车',
    label: '高空作业车',
  },
  {
    value: '桥梁检测车',
    label: '桥梁检测车',
  },
  {
    value: '自行走',
    label: '自行走',
  }
]
//表格 标题和内容
// const tableData = [
//   {
//     xuhao: '01',
//     chepaihao: '京a001',
//     dingdanhao: '订单001',
//     leixing: '加油',
//     jiayouriqi: '2023-06-11',
//     jine: '500',
//     shangchuan: '',
//     beizhu: '邮箱加满',
//   }
// ]
const tableData = ref()
// 添加记录的表单内容
const form = ref({
    xuhao: '',
    chepaihao: '',
    dingdanhao: '',
    leixing: '加油',
    jiayouriqi: '',
    jine: '',
    shangchuan: '',
    beizhu: '',
})

// 添加记录的表单内容
const form1 = ref({
    xuhao: '01',
    chepaihao: '京a001',
    dingdanhao: '订单001',
    leixing: '加油',
    jiayouriqi: '2023-06-11',
    jine: '500',
    shangchuan: '',
    beizhu: '邮箱加满',
})

// 编辑车辆记录按钮
const bianjiClick = (index) => {
  bianjiVisible.value = true
  form1.value = tableData.value[index]
}

//获取加油记录列表
const getInfo = ()=>{
  tableloading.value = true
  getJiayouList(count.value).then(res =>{
    tableloading.value = false
    console.log(res)
    tableData.value = res.data.content
    total.value = res.data.totalElements
  })
}

//添加加油记录
const addInfo = ()=>{
  addJiayou(form.value).then(res =>{
    console.log(res)
    dialogVisible.value = false
      getInfo()
  })
}
// 删除加油记录
const deleterInfo = (id)=>{
  const idx = tableData.value[id].xuhao
  deleteJiayou(idx).then(res =>{
    console.log(res)
    getInfo()
  })
}

//编辑加油记录
const putInfo = ()=>{
  putJiayou(form1.value).then(res =>{
    console.log(res)
    bianjiVisible.value = false
    getInfo()

  })
}

onMounted(()=>{
  getInfo()
})
</script>

<style lang="scss" scoped>
.all {
  background-color: #d6d6d6;
  height: 100%;
  overflow: hidden;
  padding-left: 10px;

  .bread {
    height: 30px;
    background-color: #fff;
    margin-bottom: 10px;
  }

  .nav {
    height: 40px;
    background-color: #fff;
    margin-bottom: 10px;
    padding: 5px;

    div {
      span {
        margin: 10px;
        line-height: 40px;
      }
    }
  }

  .content {
    background: #fff;
    height: 100%;
    padding: 5px;
    overflow: hidden;
  }
}
</style>